<template>
	<view class="attendance-page">
		<view class="attendance-page-head">
			<view class="attendance-page-head-circle">{{user.name}}</view>
			<view class="attendance-page-head-text">
				<view class="attendance-page-head-text-username">{{user.name}}</view>
				<view class="attendance-page-head-text-group">
					未加入考勤组
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
			<view class="2" style="float: left; margin-left: 150rpx;" @click="toa()">
				<u-icon name="clock" color="#aaaaff" size="32"></u-icon>
				<u--text  text="统计" style="padding-right: 10rpx;" size="10"></u--text>
			</view>
			<view style="float: left;margin-left: auto;" @click="torule()">
				<u-icon name="file-text-fill" color="#2979ff" size="32"></u-icon>
				<u--text  text="考勤规则" style="padding-right: 10rpx;" size="10"></u--text>

			</view>
		</view>
		<view class="attendance-page-body">
			<!-- 手风琴效果 -->
			<uni-collapse class="attendance-page-body-collapse" accordion="true">
				<uni-collapse-item class="attendance-page-body-collapse-item" style="font-size: 60rpx;" title="考勤时间">
					<view style="padding: 30rpx;">
						<view class="attendance-page-body-collapse-item-title">
							<h5>上下班时间</h5>
						</view>
						<view class="attendance-page-body-collapse-item-text">
							<view> 周一、二、三、四、五、六、日：09：00-18：00</view>
							<view>无休息日</view>
						</view>
					</view>
				</uni-collapse-item>

				<uni-collapse-item class="attendance-page-body-collapse-item" title="补卡规则">
					<view style="padding: 30rpx;">
						<view class="attendance-page-body-collapse-item-title">
							<h5>缺卡后可以补卡</h5>
						</view>
						<view class="attendance-page-body-collapse-item-text">
							<view>每个月最多最多补卡5次，可补过去31天内的缺卡</view>

						</view>
					</view>

				</uni-collapse-item>
				<uni-collapse-item class="attendance-page-body-collapse-item" title="考勤范围">
					<view style="padding: 30rpx;">
						<view class="attendance-page-body-collapse-item-text">
							<view>当前的打卡范围是距离公司{{this.distance}}米</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>

		</view>
		<view v-for="(item,index) in InfoList" :key="index">
			<uni-card title="打卡时间" >
				<view style="font-size: 14px;color:#303133;" >
					{{item.ptime}}
				</view>
			</uni-card>
		</view>
		<view style="margin: auto">
			<u--image :showLoading="true" src="/static/img/fximage/下班了.png" width="200px" height="200px" shape="circle" @click="click"></u--image>
		</view>

		<view style="margin: 30rpx;">
				<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
		            <view>
		                <u--image :showLoading="true" src="/static/img/fximage/OK.jpg" width="200px" height="200px"  @click="click"></u--image>
		            </view>
				</u-popup>
				<u-button @click="toclock()" color="blue" >点击打卡</u-button>
			</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				//  用户数据
				user: {name:'牛马打工人',time1:'09:01',time2:'18:03'},
				//  打卡距离
				distance:100,
				show:false,
				date: new Date().toISOString().slice(0, 10),
				isShow:true,
				InfoList:{}

			}
		},
		onLoad() {
			this.toClockInfo()
		},
		onShow() {
			this.toClockInfo()
		},
		methods: {
			toa(){
				uni.navigateTo({
					url:"./statistics"
				})
			},
			torule(){
				uni.navigateTo({
					url:"./rule"
				})
			},
			open() {
			    // console.log('open');
			        },
			close() {
				this.show = false
			    // console.log('close');
			},
			toclock(){
				uni.request({
					url:'http://localhost:9525/performance/punch/add',
					data:{},
					method:'POST',
					success: (res) => {
						console.log("打卡成功")
					}

				})
				this.show = true
			},
			toClockInfo(){
				uni.request({
					url:'http://localhost:9525/performance/punch/select',
					method:'GET',
					success: (res) => {
						this.InfoList=res.data.data.list
					}

				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.attendance-page {
		display: flex;
		flex-direction: column;

		.attendance-page-head {
			height: 160rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 38rpx;

			.attendance-page-head-circle {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50%;
				background-color: rgb(0, 157, 254);
				color: #FFFFFF;
				text-align: center;
				line-height: 100rpx;
				font-size: 24rpx;

			}

			.attendance-page-head-text {
				margin-left: 30rpx;
				font-size: 38rpx;
				display: flex;
				flex-direction: column;
			}
			.attendance-page-head-text-group{
				font-size: 28rpx;
				color: #3C3E49;
			}
		}

		.attendance-page-body {
			.attendance-page-body-collapse {
				.attendance-page-body-collapse-item {

					.attendance-page-body-collapse-item-title {
						font-size: 36rpx;
						margin-top:-38rpx;
						margin-bottom:5rpx;
					}

					.attendance-page-body-collapse-item-text {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
